<template>
	<view>
		<!-- 可以截图页面某个标签内的内容 -->
		<view    @click="html2canvas.emitData" :screenId="screenId" :autoScreen="autoScreen"  :change:autoScreen="html2canvas.emitData"  :change:screenId="html2canvas.receiveOption"  class="html2canvas">
			<slot></slot>
		</view>
	</view>
</template>

<script>
import {base64ToPath} from '@/static/js/image-tools.js';

export default {
		props: { 
			screenId:{
				type: String,
				required: true
			}
		},
		data(){
			return {
				autoScreen:false
			}
		},
		mounted:function(){  
		},
		
		methods: {
			startScreen: function(options) {
				 this.autoScreen = !this.autoScreen;
			},
			// 接收renderjs发回的数据
			async receiveRenderData(imgData) {
				let posterHeight=imgData.height;
				let posterWidth=imgData.width;
				let imgPath =await base64ToPath(imgData.imgVal, '.jpeg');
				this.$emit('renderFinish', {"posterPath":imgPath,"posterHeight":posterHeight,"posterWidth":posterWidth});
				uni.hideLoading();
			},
			showLoading() {
				uni.showLoading({
					title: "正在生成页面内容",
					icon: "none",
					mask: true
				})
			},
			hideLoading() {
				uni.hideLoading();
			} 
		}
	}
</script>


<script module="html2canvas" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return { 
				screenId:{
					
				}
			}
		},
		mounted:function(){
			// console.log("截图已经准备");
			// console.log(this.screenOptions);
			
		},
		methods: { 
			receiveOption(newValue, oldValue, ownerVm, vm){
				// console.log(newValue)
				//监听screenOptions参数变化就会执行此方法
				this.screenId = newValue
			},
			// 发送数据到逻辑层,下面这里最好是加一个settimeout延迟,因为主界面数据还没加载渲染完成
			emitData() {  
				const autoScreen = this.$ownerInstance.callMethod('getAutoScreen', true);
				this.$ownerInstance.callMethod('showLoading', true);
				const dom = document.getElementById(this.screenId);
				console.log("dom",dom);
				if(dom == null){
					this.$ownerInstance.callMethod('hideLoading', true);
					return;
				}
				let width= dom.offsetWidth;
				let height=dom.offsetHeight; 
				let windowHeight= uni.getSystemInfoSync().windowHeight;
				let windowWidth=uni.getSystemInfoSync().windowWidth;
				html2canvas(dom, {
					width:width,
					height:height,
					//scale:2.5, // 缩放倍数
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					x:0,
					y:0,
					windowWidth:windowWidth,
					windowHeight:windowHeight,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					let imgVal= canvas.toDataURL('image/png');
					this.$ownerInstance.callMethod('receiveRenderData',{imgVal:imgVal,height:height,width:width});
				});
			}
		}
	};
</script>


<style lang="scss">

</style>
